<template>
<!--  v-if="!(userAccountGroup1.length === 0 && userAccountGroup2.length === 1)"-->
  <div>
    <div>
      <div style="display: inline">{{$t('common.user')}}：</div>
      <el-checkbox v-model="checkAll" :indeterminate="allIndeterminate" @change="chooseAll" :disabled="disdisabled">{{$t('common.selectAll')}}</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox
        v-for="item in userAccountList"
        :key="item.id"
        :label="showNum ? `${item.account}(${attrNumber(item.num)})` : `${item.account}`"
        :class="{
          'amountType3': item.amountType !== 0,
        }"
        :disabled="disdisabled"
        v-model="item.check"
        @change="changeValue"
        style="width: 150px"
        v-show="!showNum || item.num > 0"></el-checkbox>
    </div>
    <div
      class="user-account-group2 mgt10"
    >

    </div>

  </div>
</template>


<style>
.amountType3 .el-checkbox__label{
  color: #FF0000 !important;
}
</style>

<script>
import userOrderAccountOptions from "@/views/order/mixin/userOrderAccountOptions";
import {attrNumber} from "@/utils/common";

export default {
  name: "UserOrderCheckBox",
  mixins: [userOrderAccountOptions],
  props: {
    showNum: {
      type: Boolean,
      default: true,
    },
    disdisabled: {
      type: Boolean,
      default: false,
    },
  },
  watch:{

  },
  computed: {
    allIndeterminate(){
      let flag = true;
      if(this.userIds.length === 0){
        return false;
      }
      if(this.userIds.length === this.userAccountList.length){
        return false;
      }

      return flag
    }
  },
  data(){
    return {
      checkAll: true,
      userIds: [],
    }
  },
  created() {

  },
  methods:{
    attrNumber,
    changeValue(){
      this.userIds = [];
      this.userAccountList.forEach(item=>{
        if(item.check){
          this.userIds.push(item.id)
        }
      })
      if(this.userIds.length === this.userAccountList.length){
        this.checkAll = true;
      }
      if(this.userIds.length === 0){
        this.checkAll = false;
      }

      this.$emit('input', this.userIds)
      this.$emit('change', this.userIds);
    },
    // 选择所有
    chooseAll(){
      this.userIds = [];
      if(this.checkAll){
        this.userAccountList.forEach(item=>{
          item.check = true;
        })
      }else{
        this.userAccountList.forEach(item=>{
          item.check = false;
        })
      }
      this.changeValue()
    },
    // 再次请求接口

  }
}
</script>

<style scoped lang="scss">
.user-account-group1{
  margin: 10px 0;
  display: flex;
  .left{
    min-width: 10%;
    margin-right: 30px;
    overflow: hidden;
    display: inline-block;

  }
  .right{
    display: inline-block;
    width: 80%;
    //line-height: 25px;
  }
}
.user-account-group2{

}
</style>
